<template>
    <div class="nav bg">
        <div class="item" @click="switchPage(item.id)" v-for="item in titleData" :key="item.id">
            <span class="title" :class="{ active: pageIndex == item.id }">{{ item.name }}</span>
            <span class="detail" :class="{ active: pageIndex == item.id }">{{ item.title }}</span>
        </div>
    </div>
</template>
<script>
import eventBus from "@/common/event-bus";
export default {
    name: "WaterNavBar",
    data() {
        return {
            pageIndex: 1,
            titleData: [],
        }
    },
    created() {
        this.getTitle();
    },
    methods: {
        getTitle() {
            this.$sendGet("Index/categoryList")
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data;
                        this.titleData.push(...data)
                    }
                })
        },
        switchPage(index) {
            this.pageIndex = index;
            eventBus.$emit("changeData", index)
        },
    }
}
</script>
<style lang="scss" scoped>
.nav {
    margin-top: 10px;
    padding: 10px 20px;
    padding-top: 15px;
    display: flex;
    align-items: center;

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &:nth-of-type(1) {
            padding-right: 10px;
            margin-right: 10px;
            border-right: 1.5px solid #cecece;
        }

        .title {
            font-weight: bold;

            &.active {
                color: #fb1f21;
            }
        }

        .detail {
            font-size: 12px;
            margin-top: 10px;
            padding: 3px 10px;

            &.active {
                color: #ffece5;
                background-color: red;
                background-image: linear-gradient(to right, #fe742c, #fa241a);
                border-radius: 10px;
            }
        }
    }

}
</style>